How to Make a Font

Terminology

Typeface: The character list
Font: A typeface at a given size and weight
Font Family: Typeface at varying weights
Weight: Bold, Regular, Thin, etc.
Character: A single element of a font
Glyph: The representation(s) of a given character.

Styles

Serif, Sans Serif, Slab Serif
Antiqua/Old Style/Black Text
Cursive: Joined handwriting typefaces
Script: More formal than cursive

Variations

Condensed
Italic: Redesign of Roman typeface, not merely slanted

Weights

Roman: Regular weight of a typeface

Views

Oblique/Slanted: Tilted standard typeface

Design

Body: Invisible space occupied by a character
Axis/Stress: Line drawn through the middle of a character, from it's thinnest top and bottom point (in a serif O)
Baseline
Ascender
Descender
Cap Height
x-Height/Midline
Kerning: Design level letter spacing, dictates how far individual letters are spaced from one another

Typesetting

Tracking/Letter Spacing: Adjustment done in web design / typesetting where the spacing is adjusted aside from default kerning
Leading/Line Spacing: Spacing between lines
Word Spacing: Distance between two words

Rendering

Rasterization - involves Anti-Aliasing and Hinting

CSS

Units

Absolute Units:
cm
in
pc = pixel
pt = 1/12th of a px

Relative Units:
px: Magical unit that adjusts to screen size
em: Relative width of the point size
ex: Relative to the x-height

Variables

font-size
line-height
letter-spacing
font-kerning (Usually specified in quality fonts)

Tips

1. Create a brief for what you want out of the font
2. Design font on paper first
3. Use control characters to help design (lowercase=n, o; uppercase=H, O)
4. Switch to PC by uploading your sketch
5. Use a font editor and create the glyphs
6. Test the font in typing mode, at different sizes and in paragraphs

Kerning

1. You have to kern each letter individually
2. Kerning is all about feeling
3. Test kerning when size changes
4. Practice Game: https://type.method.ac/
5. Letters to keep an eye on
   1. Slanted Letters: A, K, V, W, Y
   2. Letters with arms or cross-strokes: F, T, L
   3. Letter combinations: W or V + A; F or T + a lowercase vowel
6. Two straight lines need the most space: II > IO > OO
7. Try flipping the letters upside down, so you can see the spaces unbiased

Hinting

Happens automatically, but can be set manually in font editors with TrueType instructions
e.g. SNAGW (Set Angle Weight), MDAP (Move Direct Absolute Point)

Design Basics

• Words must be spaced more than letters, to form distinct units.